<template>
  <div
    @click="goCanvasImg"
    class="sp_share_boxs"
     :style="positionState === true ? 'top:'+ 80 +'px;' : 'top:'+ 25 +'px;'"
  >
    <div v-if="al == 2 && share === '' &&  query && query.type == '0' && money !== '0.00'">
      <img src="https://o6wndwjxn.qnssl.com/make.svg">
      推广赚￥
      <span>{{money}}</span>
    </div>
      <div v-if="al == 2 && share === '' &&  open && open == 'on' && money !== '0.00'">
      <img src="https://o6wndwjxn.qnssl.com/make.svg">
      推广赚￥
      <span>{{money}}</span>
    </div>
    <div v-if=" (al==1 || al==2)  && share !== ''" class="text">
      推荐好友学
    </div>
     <div v-if=" (money == 0 && share === '') &&  (open && open == 'off')" class="text">
      推荐好友学
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['promotionMoney', 'except', 'state', 'curriculum_id', 'share', 'query', 'type_type', 'open', 'is_id'],
  data () {
    return {
      al: '',
      money: '',
      positionState: ''
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  watch: {
    state (newsvalue) {
      this.positionState = newsvalue
    },
    promotionMoney () {
      this.money = this.except ? this.promotionMoney / 100 : this.promotionMoney
      if (this.money <= 0) {
        this.al = 1
      } else {
        this.al = 2
      }
    }
  },
  created () {
    this.money = this.except ? this.promotionMoney / 100 : this.promotionMoney
    if (this.money <= 0) {
      this.al = 1
    } else {
      this.al = 2
    }
  },
  methods: {
    // 推广赚
    goCanvasImg () {
      this.$router.push({
        path: '/co_canvasimg',
        query: {
          is_id: this.is_id === undefined ? this.query.discount_id : this.is_id,
          type_type: this.type_type,
          member_id: this.user_id,
          curriculum_id: this.curriculum_id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.text{
  padding-left: 10px;
  text-align: center;
}
.sp_share_boxs {
  position: fixed;
  right: 0;
  height: 30px;
  background: rgba(218,65,49,0.9);
  z-index: 500;
  color: white;
  font-size: 10px;
  border-radius: 50px 0 0 50px;
  line-height: 30px;
  transition: all 0.5s;
  padding: 0 10px 0 5px;
  img{
    width: 20px;
    height: 20px;
  }
}
.sp_share_boxs > div {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.sp_share_boxs > div img {
  width: 20px;
  height: 20px;
  margin-left: 7px;
  margin-right: 7px;
}
</style>
